<template>
  <div id="app">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="心愿">
        <el-input v-model="form.xin"></el-input>
      </el-form-item>
      <el-form-item label="头像">
        <el-radio-group v-model="form.resource">
          <el-radio label="图1"><img src="./imgs/人.jpg" alt="" /></el-radio>
          <el-radio label="图2"><img src="./imgs/猫.jpg" alt="" /></el-radio>
          <el-radio label="图3"><img src="./imgs/鸡.jpg" alt="" /></el-radio>
          <el-radio label="图4"><img src="./imgs/朱.jpg" alt="" /></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="add()">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="resource" label="头像"> </el-table-column>
      <el-table-column prop="time" label="日期"> </el-table-column>
      <el-table-column prop="xin" label="愿望"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="Delete()">批量删除</el-button>
  </div>
</template>
<script>
//映射
import { mapMutations,mapState } from "vuex";
export default {
  computed: {
    ...mapState(["tableData"])
  },
  data() {
    return {
      //获取内容
      form: {
        name: "",
        xin: "",
        time: new Date().toLocaleString(),
        resource: "",
      },
    };
  },
  methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        };
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      ...mapMutations(['addobj','delobj']), 
      //添加
      add(){
        //判断
        if(this.form.name==""||this.form.xin==""||this.form.resource==""){
          return alert('不能为空')
        }
        //组合对象添加
        var obj ={
          name:this.form.name,
          resource:this.form.resource,
          xin:this.form.xin,
          time:this.form.time
        };
        //执行添加
        this.addobj(obj);
        //清空
        this.form.name=this.form.xin=this.form.resource="";
      },
      handleDelete(index,row){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delobj(index)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      Delete(){
        this.$confirm('此操作将永久批量删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.liangobj()
          this.$message({
            type: 'success',
            message: '批量删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '批量已取消删除'
          });          
        });
      }
    }
};
</script>
<style lang="scss" scoped>
img {
  width: 50px;
  height: 50px;
}
</style>
